<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" ref="hhhh" class="home">
        <div class="homeLeft">
            <div class="homelogo">
                <img src="/static/img/logoImg.png" alt="">
            </div>
            <div class="personageView">
                <div>
                    <img src="/static/img/raw_1482510356.jpeg" alt="">
                </div>
                <div>
                    <div>{{userState}}</div>
                    <div class="statePon">
                        <div></div>
                        <div>管理员</div>
                        <div @click="backHome">[退出]</div>
                    </div>
                </div>
            </div>
            <div class="sideNav">
                <ul>
                    <li v-for="(list,index) in lists" :class="{sadeNacLi:isSadeNacLi,sadeNacClo:isSadeNacClo == index}" @click="sadeNavClick(index)">
                        <!--<div><img :src="list.img" alt=""></div>-->
                        <div><span :class="list.img"></span></div>
                        <div>{{list.name}}</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="homeRight">
            <div class="topNav">
                <div class="topNavL"></div>
                <div class="topNavR">
                </div>
            </div>
            <div class="homeMain">
                <router-view keep-alive></router-view>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        name: 'home',
        data() {
            return {
                userState: '管理员',
                isNavPopup: false,
                lists: [{
                    name: '用户管理',
                    img: 'glyphicon glyphicon-user',
                    push: 'user'
                }, {
                    name: '套餐管理',
                    img: 'glyphicon glyphicon-gift',
                    push: 'harness'
                }, {
                    name: '轮播管理',
                    img: 'glyphicon glyphicon-retweet',
                    push: 'carousel'
                }, {
                    name: '订单管理',
                    img: 'glyphicon glyphicon-list-alt',
                    push: 'order'
                }, {
                    name: '商户管理',
                    img: 'glyphicon glyphicon-home',
                    push: 'store'
                }, {
                    name: '日志查看',
                    img: 'glyphicon glyphicon-file',
                    push: 'record'
                }, {
                    name: '类别管理',
                    img: 'glyphicon glyphicon-folder-close',
                    push: 'category'
                }, {
                    name: '通知管理',
                    img: 'glyphicon glyphicon-envelope',
                    push: 'message'
                }, {
                    name: '提现管理',
                    img: 'glyphicon glyphicon-usd',
                    push: 'deposit'
                }, {
                    name: '活动管理',
                    img: 'glyphicon glyphicon-certificate',
                    push: 'activity'
                }, {
                    name: '管理员',
                    img: 'glyphicon glyphicon-cog',
                    push: 'admin'
                }],
                isSadeNacLi: true,
                isSadeNacClo: 0
            }
        },
        created: function () {
            var name = sessionStorage.getItem('userName')
            if (name) {
                this.userState = name
            } else {
                this.userState = "管理员"
            }
            var psthStr = this.$route.path.split('/')[2]
            switch (psthStr) {
                case 'activity':
                    this.isSadeNacClo = 8
                    break;
                case 'message':
                    this.isSadeNacClo = 7
                    break;
                case 'admin':
                    this.isSadeNacClo = 9
                    break;
                case 'category':
                    this.isSadeNacClo = 6
                    break;
                case 'record':
                    this.isSadeNacClo = 5
                    break;
                case 'store':
                    this.isSadeNacClo = 4
                    break;
                case 'order':
                    this.isSadeNacClo = 3
                    break;
                case 'carousel':
                    this.isSadeNacClo = 2
                    break;
                case 'harness':
                    this.isSadeNacClo = 1
                    break;
                case 'user':
                    this.isSadeNacClo = 0
                    break;
                default:
                    break;
            }
        },
        methods: {
            // 侧栏导航切换
            sadeNavClick(index) {
                this.isSadeNacClo = index
                var pathStr = this.lists[index].push
                var url = '/home/' + pathStr
                this.$router.push({
                    path: url
                })
            },
            // 退出界面
            backHome() {
                sessionStorage.removeItem('userId')
                sessionStorage.removeItem('userName')
                this.$router.push({
                    path: '/login'
                })
            }
        }
    }

</script>

</script>
<style scoped src="../assets/css/home.css">

</style>